<template>
  <div id="app">

    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/user">User</router-link>
    </div>

    <!-- 
        keep-alive：因名知意保值活跃 ， 是用来缓存组件的
        有keep-alive就会有缓存效果，没有keep-alive就没有缓存效果
     -->
    <!-- <keep-alive>
      <router-view/>
    </keep-alive> -->

    <!-- 需求：home要缓存，about不要缓存 -->
    <!-- 
        思路：一个用keep-alive包着，另一个不用。但是这两个不能router-view 不能共存。
        同一时间只能有一个。这时我们就可以使用v-if结合 route定义好的meta
    -->
    <!-- 第一种方式 -->
    <!-- <keep-alive>
      <router-view v-if="$route.meta.isKeep" />
    </keep-alive>
    <router-view v-if="!$route.meta.isKeep" /> -->

    <!-- 第二种方式 使用keep-alive的include, 注意组件中name要写入,一般跟组件名起一样就行 -->
    <!-- 如果要写多个
        include="Home,xxx"
        :include="['Home','xxx']"

        还有一个就是不缓存组件写法 exclude 。用法跟include一样
     -->
    <keep-alive include="Home">
      <router-view />
    </keep-alive>

    
  </div>
</template>

<style lang="less" scope>
  div{
    text-align: center;
  }
</style>
